<template>
    <div class="test">

      <div class="item-container">
        <img src="../assets/qes1.png" alt="" class="test_img">
        <div class="answer-container">
          <h1 class="answer">你的答案：</h1>
          <el-radio-group v-model="qes1">
            <el-radio label="1">A</el-radio>
            <el-radio label="2">B</el-radio>
            <el-radio label="3">C</el-radio>
            <el-radio label="4">D</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="item-container">
        <img src="../assets/qes2.png" alt="" class="test_img">
        <div class="answer-container">
          <h1 class="answer">你的答案：</h1>
          <el-radio-group v-model="qes2">
            <el-radio label="1">A</el-radio>
            <el-radio label="2">B</el-radio>
            <el-radio label="3">C</el-radio>
            <el-radio label="4">D</el-radio>
          </el-radio-group>
        </div>
      </div>

      <div class="item-container">
        <img src="../assets/qes3.png" alt="" class="test_img">
        <div class="answer-container">
          <h1 class="answer">你的答案：</h1>
          <el-radio-group v-model="qes3">
            <el-radio label="1">A</el-radio>
            <el-radio label="2">B</el-radio>
            <el-radio label="3">C</el-radio>
            <el-radio label="4">D</el-radio>
          </el-radio-group>
        </div>
      </div>

      <div class="item-container">
        <img src="../assets/qes4.png" alt="" class="test_img">
        <div class="answer-container">
          <h1 class="answer">你的答案：</h1>
          <el-radio-group v-model="qes4">
            <el-radio label="1">A</el-radio>
            <el-radio label="2">B</el-radio>
            <el-radio label="3">C</el-radio>
            <el-radio label="4">D</el-radio>
          </el-radio-group>
        </div>
      </div>

      <div class="item-container">
        <img src="../assets/qes5.png" alt="" class="test_img">
        <div class="answer-container">
          <h1 class="answer">你的答案：</h1>
          <el-radio-group v-model="qes5">
            <el-radio label="1">A</el-radio>
            <el-radio label="2">B</el-radio>
            <el-radio label="3">C</el-radio>
            <el-radio label="4">D</el-radio>
          </el-radio-group>
        </div>
      </div>

      <div class="item-container">
        <img src="../assets/qes6.png" alt="" class="test_img">
        <div class="answer-container">
          <h1 class="answer">你的答案：</h1>
          <div>
            <el-input v-model="qes6" placeholder="请输入答案" style="width: 500px"></el-input>
          </div>
        </div>
      </div>
<!--      <div class="item-container">-->
<!--        <img src="../assets/test4.png" alt="" class="test_img">-->
<!--        <div class="answer-container">-->
<!--          <h1 class="answer">你的答案：</h1>-->
<!--          <div>-->
<!--            <el-input v-model="test4" placeholder="请输入答案" style="width: 500px"></el-input>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--      <div class="item-container">-->
<!--        <div style="color: #409EFF;cursor: pointer" @click="program">点击进入编程题 >>></div>-->
<!--      </div>-->

      <div class="item-container" style="align-items: center">
          <el-button type="primary" @click="submit">提交答题</el-button>
      </div>




    </div>
</template>

<script>
  // import { button1} from "../api";
import axios from 'axios'
  export default {
        name: "Test",
        data(){
          return{
            qes1:0,
            qes2:0,
            qes3:0,
            qes4:0,
            qes5:0,
            qes6:'',
          }
        },
      methods:{
        // program(){
        //   window.open('https://www.luogu.com.cn/contest/37954', '_blank');
        // },
        submit(){
          var end_time = String(new Date());
          var my_class = sessionStorage.getItem("my_class");
          var name = sessionStorage.getItem("name");
          var start_time = sessionStorage.getItem("start_time");
          // var total_time = end_time-start_time;
          console.log(my_class,name,start_time,end_time,this.qes1,this.qes2,this.qes3,this.qes4,this.qes5,this.qes6)
          var args = {
            name: name,
            class: my_class,
            ans1: this.qes1,
            ans2: this.qes2,
            ans3: this.qes3,
            ans4: this.qes4,
            ans5: this.qes5,
            ans6: this.qes6,
            start_time:start_time,
            end_time:end_time,

          }
          axios.post('http://localhost:8889/api/admin/info/insert',{
            name: name,
            class: my_class,
            ans1: this.qes1,
            ans2: this.qes2,
            ans3: this.qes3,
            ans4: this.qes4,
            ans5: this.qes5,
            ans6: this.qes6,
            start_time:start_time,
            end_time:end_time,
          }).then(res => {
            console.log(res);
            this.$router.push({path:'/thanks'})
          })
          console.log(args);
          // button1(args).then(res => {
          //   console.log(res);
          // })
          // this.$http.post('/api/admin/ans/insert',args)
          //   .then(function (response) {
          //     console.log(response);
          //     this.$router.push({path:'/thanks'})
          //   })
          //   .catch(function (error) {
          //     console.log(error);
          //   });
        }
      }
    }
</script>

<style scoped>
  .test{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .item-container{
    width: 1000px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  /*.test_img{*/
  /*  width: 85%;*/
  /*}*/

  .answer-container{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .answer{
    color: #409EFF;
    font-size: 16px;
    font-weight: normal;
  }



</style>
